<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body class="bg-gray-50 text-gray-800">

<!-- 顶栏 -->
<div class="flex items-center justify-between bg-white px-6 py-4 shadow mb-6">
    <div class="flex items-center gap-4">
        <a href="/dormitory" class="bg-blue-100 text-blue-600 px-3 py-1 rounded hover:bg-blue-200 transition">←
            返回首页</a>
    </div>
    <div class="flex items-center gap-6">
        <span class="text-sm">当前用户：<strong th:text="${session.get('loginUsername')}">admin</strong></span>
        <a href="/doLogout" class="bg-red-100 text-red-600 px-3 py-1 rounded hover:bg-red-200 transition">退出登录</a>
    </div>
</div>

<!-- 搜索栏 -->
<div class="max-w-6xl mx-auto px-4 mb-4">
    <form class="flex gap-2">
        <input type="text" name="keyword" id="keyword_input" placeholder="搜索姓名/学号"
               class="flex-1 border rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
               oninput="onKeywordChanged(event)">
    </form>
</div>
<div id="content" th:fragment="content">
    <!-- 学生信息表 -->
    <div class="max-w-6xl mx-auto bg-white rounded shadow px-6 py-4">
        <table class="w-full text-sm text-left border-collapse">
            <thead class="bg-gray-100">
            <tr>
                <th class="p-2 border">ID</th>
                <th class="p-2 border">学号</th>
                <th class="p-2 border">姓名</th>
                <th class="p-2 border">性别</th>
                <th class="p-2 border">出生日期</th>
                <th class="p-2 border">学院</th>
                <th class="p-2 border">专业</th>
                <th class="p-2 border">班级</th>
                <th class="p-2 border">学籍状态</th>
                <th class="p-2 border">宿舍</th>
                <th class="p-2 border">床位</th>
                <th class="p-2 border">手机号</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="stu : ${studentPage.records}" class="hover:bg-gray-50">
                <td class="p-2 border" th:text="${stu.id}">1</td>
                <td class="p-2 border" th:text="${stu.studentId}">20230001</td>
                <td class="p-2 border" th:text="${stu.name}">张三</td>
                <td class="p-2 border" th:text="${stu.gender == 0 ? '男' : '女'}"></td>
                <td class="p-2 border" th:text="${#dates.format(stu.birthDate, 'yyyy-MM-dd')}"></td>
                <td class="p-2 border" th:text="${stu.college}"></td>
                <td class="p-2 border" th:text="${stu.major}"></td>
                <td class="p-2 border" th:text="${stu.className}"></td>
                <td class="p-2 border"
                    th:text="${stu.status==0?'在读':(stu.status==1?'休学':(stu.status==2?'退学':(stu.status==3?'毕业':'结业')))}"></td>
                <td class="p-2 border" th:text="${stu.dormId}"></td>
                <td class="p-2 border" th:text="${stu.bedNumber}"></td>
                <td class="p-2 border" th:text="${stu.phone}"></td>
            </tr>
            <tr th:if="${studentPage.records.size() == 0}">
                <td colspan="11" class="text-center text-gray-400 py-6">暂无学生数据</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页组件 -->
    <div class="max-w-6xl mx-auto mt-6 flex justify-between items-center px-4">
        <div class="text-sm text-gray-500">共 <span th:text="${studentPage.total}">0</span> 条记录</div>
        <div class="flex gap-2">
            <a th:href="@{/students(page=${studentPage.current - 1}, keyword=${keyword})}"
               th:if="${studentPage.current > 1}"
               class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">上一页</a>

            <span class="px-3 py-1 bg-blue-500 text-white rounded" th:text="${studentPage.current}">1</span>

            <a th:href="@{/students(page=${studentPage.current + 1}, keyword=${keyword})}"
               th:if="${studentPage.current < studentPage.pages}"
               class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">下一页</a>
        </div>
    </div>
</div>
<script>
    function onKeywordChanged(event) {
        const inputValue = event.target.value
        console.log(inputValue)
        $('#content').load(`/students?fragment=1&keyword=${inputValue}`)
    }
</script>
</body>
</html>
